<!-- 系统公告 -- 禹光彩 -- 2017年4月25日09:54:26 -->
<template>
  <div >
    <div v-if="noticeAdd">
      <!-- 查询条件 -->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;height:46px">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-select v-model="filters.type" placeholder="选择消息公告类型" change="handleChange" clearable style="width: 100%;vertical-align:top;" size="small" id="el-select">
              <el-option label="公告" value="0"></el-option>
              <el-option label="提示消息" value="1" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.title" size="small" placeholder="标题" style="vertical-align:top;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="search" size="small" style="vertical-align:top;line-height:14px">查询</el-button>
          </el-form-item>
          <el-form-item class="button-align">
             <el-button type="primary" @click="goNoticeAdd" size="small" v-if="getAuth(2)">新增消息公告</el-button>
          </el-form-item>
          <el-form-item class="button-align">
            <el-button type="danger" @click="batchDelete" :disabled="this.sels.length===0" size="small" v-if="getAuth(1)">批量删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="noticeList" v-loading="listLoading" @selection-change="selsChange" border style="width: 100%; font-size: 12px;" row-class-name="tabRow" tooltipEffect="light">
        <el-table-column type="selection" :disabled="disableType" v-if="getAuth(1)"></el-table-column>
        <el-table-column align="center" :formatter="formatType" label="消息公告类型"></el-table-column>
        <el-table-column align="center" prop="title" label="标题" show-overflow-tooltip>
          <template scope="scope">formatContent2(scope.row.title)</template>
        </el-table-column>
        <el-table-column align="center" prop="content" label="消息公告详情" show-overflow-tooltip>
          <template scope="scope">{{ formatContent2(scope.row.content) }}</template>
        </el-table-column>
        <el-table-column align="center" prop="author" label="发布人"></el-table-column>
        <el-table-column align="center" :formatter="createTimeStr" label="发布时间"></el-table-column>
        <el-table-column align="center" prop="file" label="附件" show-overflow-tooltip>
          <template scope="scope" >
            <a :href="scope.row.file" target="_blank" class="fileCalss">{{ getZipName(scope.row.file) }}</a>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" label="操作">
          <template scope="scope">
            <el-button size="small" type="info" @click="handleShow(scope.$index, scope.row)" v-if="getAuth(0)">详情</el-button>
            <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)" v-if="getAuth(3)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="getAuth(4)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar" style="margin-top: 15px;" v-show="!listLoading">
        <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
        </el-pagination>
      </el-col>
      <el-col>
        <!-- 公告详情展示 -->
        <el-dialog :title="dialogTitle" :visible.sync="contentDia" :close-on-click-modal="false" size="large" style="width: 1000px;margin:0 auto;">
         <!--<div style="text-align: center">-->
          <div style="text-align: center;margin-top:-30px"><h2>{{ baseNotice.title }}</h2></div>
          <div>消息公告类型：{{ getTypeName(baseNotice.type) }}</div>
          <div style="margin-top:8px">创建人：{{ baseNotice.author }}</div>
          <div style="margin-top:8px">创建时间：{{ formatTimeStr(baseNotice.createTime) }}</div>
          <div>
            <span>内容：<span v-html="baseNotice.content" id="inlinecontent"></span></span>
          </div>
          <div v-if="baseNotice.file !== ''">附件：<a :href="baseNotice.file" target="_blank" style="color:#20A0FF">{{ getFileName(baseNotice.file) }}</a></div>
          <div scope="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click.native="resetNotice">返回</el-button>
          </div>
         <!--</div>-->
        </el-dialog>
      </el-col>
    </div>
    <!--<notice-add v-if="!noticeAdd" @clickNotice="clickNotice" :editParams="editParams"></notice-add>-->
  </div>
</template>

<script type="text/ecmascript-6">
  import {buttonAuth, resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        editParams: {}, // 编辑时传的参数
        noticeList: [],
        noticeAdd: true,
        sels: [], // 列表选中列
        dialogTitle: '',
        total: 2,
        page: 1,
        pageSize: 10,
        disableType: false, // 运营可选，供应采购不可选
        contentDia: false,
        listLoading: false,
        userType: 0,
        baseNotice: {
          type: '',
          title: '',
          content: '',
          file: '',
          author: '',
          createTime: ''
        },
        filters: {
          type: '',
          title: ''
        },
        adminButtons: [483, 358, 359, 360, 361], // 依次为 详情、批量删除、新增、编辑、删除
        ebButtons: [485], // 详情
        mdButtons: [496] // 详情
      }
    },
    methods: {
      // 判断是否登录超时
      checkIfLogin () {
        var user = sessionStorage.getItem('user')
        if (!user) {
          this.$alert('登录超时，请重新登录！', ' ', {
            type: 'warning'
          }).then(() => {
            this.$router.push({path: '/login'})
            sessionStorage.clear()
          })
        } else {
          return true
        }
      },
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initNoticeList()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.page = val
        this.currentPage = val
        this.initNoticeList()
      },
      // 获取下载问价的名字
      getZipName (url) {
        var arr = url.split('/')
        return arr[arr.length - 1]
      },
      // 初始化分页查询用户信息
      initNoticeList () {
        this.listLoading = true
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          title: this.filters.title,
          fileType: this.filters.type,
          type: this.userType
        }
        this.$http.post('/smartLight/web/baseNotice/getList.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.total = resBody.total
            this.noticeList = resBody.result
            this.listLoading = false
//            autoHeight2() // iframe调整
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      // 获取文件的名字
      getFileName (file) {
        var arr = file.split('/')
        return arr[arr.length - 1]
      },
      // 公告展示详情返回
      resetNotice () {
        this.contentDia = false
      },
      // 公告详情去除HTML标签
      formatContent2 (content) {
        content = content.replace(/<[^<>]+?>/g, '')
        return content
      },
      formatContent (content) {
        content = content.replace(/<[^<>]+?>/g, '')
        if (content.length > 10) {
          return content.substring(0, 10) + '...'
        } else {
          return content
        }
      },
      // 时间格式化
      createTimeStr (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
        var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
        var hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
        var minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
        var second = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      },
      // 时间转换
      formatTimeStr (createTime) {
        var d = new Date(createTime)
        var year = d.getFullYear()
        var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
        var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
        var hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
        var minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
        var second = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      },
      // 类型转换 1=系统升级 2=新增功能 3=配置和接口 4=代理商须知 5=系统培训 6=支付相关 7=销售通知
      formatType (row, column) {
        if (row.type === 0) {
          return '公告'
        } else if (row.type === 1) {
          return '提示消息'
        } else if (row.type === 2) {
          return '广告'
        } else if (row.type === 3) {
          return '紧急通知'
        }
      },
      // 类型转换
      getTypeName (type) {
        if (type === 0) {
          return '公告'
        } else if (type === 1) {
          return '提示消息'
        } else if (type === 2) {
          return '广告'
        } else if (type === 3) {
          return '紧急通知'
        }
      },
      search () {
        if (!this.checkIfLogin()) {
          return
        }
        this.page = 1
        this.initNoticeList()
      },
      // 选中行
      selsChange: function (sels) {
        this.sels = sels
      },
      handleChange: function (val) {
        this.baseNotice.type = val
      },
      // 展示详情
      handleShow (index, row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.contentDia = true
        this.dialogTitle = '消息公告详情'
        this.baseNotice = Object.assign({}, row)
      },
      // 【编辑】
      handleEdit (index, row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.baseNotice = Object.assign({}, row)
        this.$store.dispatch('updatelocationpath', '/baseNoticeAdd')
        var breads = this.$store.state.breads
        breads.push('编辑')
        this.$store.dispatch('updateBreads', breads)
        this.$store.dispatch('showActive', {url: '/baseNoticeAdd'})
        // 更新sessionStorage
        sessionStorage.setItem('breads', breads)
        sessionStorage.setItem('menuUrl', '/baseNoticeAdd')
        this.$router.push({name: 'baseNoticeAdd', params: {pageType: 'edit', id: this.baseNotice.id}})
      },
      // 【删除】按钮事件
      handleDelete (index, row) {
        var ids = []
        ids.push(row.id)
        this.deleteNotice(ids)
      },
      // 【批量删除】按钮事件
      batchDelete () {
        var ids = []
        this.sels.map(item => {
          ids.push(item.id)
        })
        this.deleteNotice(ids)
      },
      // 【删除】、【批量删除】执行方法
      deleteNotice (ids) {
        if (!this.checkIfLogin()) {
          return
        }
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/baseNotice/deleteByIds.htm', ids + '|' + this.userType).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.initNoticeList()
            } else if (resBody.isSuccess === 2) { // 登录超时，页面跳转
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: '操作失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      updateBreads (flag, type) {
        var breads = this.$store.state.breads
        if (flag === 0) {
          if (type === 'add') {
            if (breads.indexOf('新增消息公告') === -1) { // 不包含
              breads.push('新增消息公告')
            } else {
              breads.splice(breads.length - 1, 1)
            }
            this.$store.dispatch('updateBreads', breads)
          } else {
            if (breads.indexOf('编辑消息公告') === -1) { // 不包含
              breads.push('编辑消息公告')
            } else {
              breads.splice(breads.length - 1, 1)
            }
            this.$store.dispatch('updateBreads', breads)
          }
        } else {
          if (breads.indexOf('编辑消息公告') !== -1 || breads.indexOf('新增消息公告') !== -1) {
            breads.splice(breads.length - 1, 1)
            this.$store.dispatch('updateBreads', breads)
          }
        }
      },
      goNoticeAdd () { // 跳转到新增或编辑页面
        this.$store.dispatch('updatelocationpath', '/baseNoticeAdd')
        var breads = this.$store.state.breads
        breads.push('新增')
        this.$store.dispatch('updateBreads', breads)
        this.$store.dispatch('showActive', {url: '/baseNoticeAdd'})
        // 更新sessionStorage
        sessionStorage.setItem('breads', breads)
        sessionStorage.setItem('menuUrl', '/baseNoticeAdd')
        this.$router.push({name: 'baseNoticeAdd', params: {pageType: 'add'}})
        // this.noticeAdd = false
        // this.editParams = {pageType: 'add'}
        // this.updateBreads(0, 'add') // 面包屑更新
      },
      clickNotice (data) { // 子组件返回信息
        this.noticeAdd = !this.noticeAdd
        if (data === 'success') {
          this.initNoticeList()
        }
        this.updateBreads(1, this.pageType) // 面包屑更新
//        autoHeight2() // iframe调整
      },
      // 获取页面按钮权限
      getAuth (index) {
        return buttonAuth(index, this.userType, this.adminButtons, this.ebButtons, this.mdButtons)
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.userType = user.type
        if (user.type === 1 || user.type === 2 || user.type === 3) {
          this.disableType = true
        }
        // 浏览器向前或向后处理
        resetBreads(this)
        this.initNoticeList()
      }
    },
    components: {
      // noticeAdd
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .is-light
    max-width: 600px;
  .tabRow
    font-size: 12px;
  .button-align
    float: right;
  .el-dialog--small
    width: 37% ;
  .prompt
    color: #ff4949
    line-height: 10px !important;
    display: block;
  .fileCalss
    color: #4f0598
    text-decoration none
  #formheight
    margin: 14px 0;
    height: 38px;
    .el-form-item__content
      height: 30px;
    .el-input
      height: 30px;
      .el-input__inner
        height: 30px;

  .borderStyle
    .el-input .el-input__inner {
      border-color: #ff4949 !important;
    }

  #pagination
    background-color: transparent
    .el-input__inner
      width: 120px
#inlinecontent
  p
    display:inline-block
#el-select
  .el-input
    vertical-align:top;
.cell
  padding-left: 0px !important
  padding-right 0px !important
  overflow: hidden !important
  text-overflow: ellipsis !important
  white-space: nowrap !important
  .el-checkbox {
    padding-left: 15px !important
  }
</style>
